<template>
    <div>
        <refresh title="同步Kafka" :loading="isRefreshing" @refresh="onRefresh" />
        <!-- <el-radio-group v-model="resourceLabel">
            <el-radio-button label="公共"></el-radio-button>
            <el-radio-button v-if="isTenant" label="私有"></el-radio-button>
            <el-radio-button v-if="isTenant" label="共享"></el-radio-button>
        </el-radio-group> -->
        <search placeholder="请输入资源名称" :maxlength="8" :live-search="true" :search-word.sync="searchWord" @search="onSearch"/>
        <!-- 目录面包屑 -->
        <el-breadcrumb v-if="breadcrumbList.length" separator=">" class="breadcrumb-wrap">
            <el-breadcrumb-item @click.native="onReturn">
                <span class="cursor">返回 </span>
            </el-breadcrumb-item>
            <el-breadcrumb-item
                v-for="(bread, index) in breadcrumbList"
                :key="bread.resourceId"
                @click.native="onBreadChange(bread, index)"
            >
                <span class="cursor">{{bread.topicName}}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div v-else class="bread-holder"></div>
        <!-- 资源列表 -->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column
                label="主题名"
            >
                <template slot-scope="scope">
                    <!-- <el-link
                        v-if="!breadcrumbList.length"
                        :underline="false"
                        type="primary"
                        @click.native="onOpenService(scope.row)"
                    >{{ scope.row.topic }}</el-link> -->
                    <span>{{ scope.row.topicName || '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                :label="`分配的${subUserFlag}`"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row[subListFlag] && scope.row[subListFlag].length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row[subListFlag]" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row[subListFlag].length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="resourceType === 2"
                label="分享的租户"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.tenantList && scope.row.tenantList.length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row.tenantList" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row.tenantList.length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="创建者">
                <template slot-scope="scope">
                    <span>{{ scope.row.creator || '-' }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="分区数">
                <template slot-scope="scope">
                    <span>{{ scope.row.partitionNum || '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="副本数">
                <template slot-scope="scope">
                    <span>{{ scope.row.replication || '-' }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="logsize">
                <template slot-scope="scope">
                    <span>{{ scope.row.logsize || '-' }}</span>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="topicSize">
                <template slot-scope="scope">
                    <span>{{ scope.row.topicSize || '-' }}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-tooltip content="权限配置" placement="top">
                        <el-button @click="handleAssignAuth(scope.row)" type="text" size="small">
                            <i class="el-icon-unlock icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="查看详情" placement="top">
                        <el-button @click="handleViewDetail(scope.row)" type="text" size="small">
                            <i class="el-icon-view icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination 
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @currentPageChange="handleCurrentPageChange"
            @pageSizeChange="handlePageSizeChange"
        />
        <!-- 权限配置弹窗 -->
        <authority-dialog
            v-if="dialogVisible"
            :visible.sync='dialogVisible'
            :current-row="currentRow"
            :service-path="currentRow.topicName"
            @update="handleUpdateAuth"
        />
        <authority-detail 
            v-if="detailVisible"
            :visible.sync='detailVisible'
            :current-row="currentRow"
            :service-path="currentRow.topicName"
        />
    </div>
</template>
<script>
import { resourceApi } from '@/request'
import roleMixin from '@/mixins/role'
import serviceAuthMixin from './mixins/serviceAuthMixin.js'
import AuthorityDialog from '@/components/authority/Dialog.vue'
import AuthorityDetail from '@/components/authority/Detail.vue'
import Search from '@/components/common/Search.vue'
import Breadcrumb from '@/components/authority/Breadcrumb.vue'
import Pagination from '@/components/common/Pagination.vue'

export default {
    name: 'authorityKafka',
    components: { AuthorityDialog, AuthorityDetail, Search, Breadcrumb, Pagination },
    mixins: [ roleMixin, serviceAuthMixin ],
    computed: {
        currDir() {
            if (this.breadcrumbList.length === 0) {
                return { id: 0, nameKey: 'spaceName', childType: 'namespace' }
            }
            return this.breadcrumbList[this.breadcrumbList.length - 1]
        },
    },
    watch: {
        resourceType(newVal) {
            console.log(newVal)
            this.breadcrumbList = [ ]
            this.getResourceList({ currentPage: 1 })
        }
    },
    methods: {
        // 点击打开资源
        onOpenService(serviceInfo) {
            // if (this.breadcrumbList.length) {
            //     return false
            // }
            // this.breadcrumbList.push(serviceInfo)
            // this.getResourceList({ resourceId: serviceInfo.resourceId, currentPage: 1 })
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '~@/styles/variables.scss';
    .breadcrumb-wrap {
        margin: 20px 0;

        .el-breadcrumb__item {
            font-size: 18px; 
        }

        .root {
            cursor: not-allowed;
        }

        .cursor {
            color: $blue;
            cursor: pointer;
            font-size: 18px;
        }
    }
    .bread-holder {
        width: 20px;
        height: 58px;
    }
    .tenant-name {
        color: $dark;
    }
    .el-checkbox {
        min-width: 80px;
    }
</style>
